<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="carousel">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <img width="100%" :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图结束 -->

    <!-- 研学项目 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title">
          研学精选项目 <img width="50px" src="../assets/研学精选.png" alt="" />
        </div>

        <div
          @click="toProject(item.id)"
          class="project"
          v-for="item in projects"
          :key="item.id"
        >
          <div class="left">
            <img width="100%" :src="item.figure" alt="" />
          </div>
          <div class="right">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="time">
              {{ fmtDate(item.beginTime) }} ~ {{ fmtDate(item.endTime) }}
            </div>
            <div class="content">
              {{ item.introduce }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 研学项目结束 -->

    <!-- 学生风采 -->
    <div class="article">
      <div class="wrapper">
        <div class="title">
          学生风采 <img width="50px" src="../assets/学生风采.png" alt="" />
        </div>
        <div class="arts">
          <div
            class="studentArt"
            @click="toArtDetails(item.id)"
            v-for="item in article"
            :key="item.id"
          >
            <div class="pic">
              <img width="100%" :src="item.cover" />
            </div>
            <div class="text">
              <div class="content">
                {{ item.title }}
              </div>
              <div class="time">{{ fmtDate(item.publishTime) }}</div>
              <div class="name">{{ item.baseUser.realname }}</div>
              <div class="star">
                <img width="20px" src="../assets/点赞.png" alt="" />
                {{ item.thumpUp }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学生风采结束 -->

    <!-- 常见问题 -->
    <div class="problem">
      <div class="wrapper">
        <div class="title">
          常见问题
          <img width="48px" src="../assets/常见问题.png" alt="" />
        </div>
        <div class="content">
          <el-row>
            <el-col :span="10">
              <div class="left">
                <span
                  >孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</span
                >
                <p>
                  其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。
                </p>
                <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="right">
                <span>参加夏令营到底有什么好处？</span>
                <p>
                  国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。
                </p>
                <img src="https://img2.baidu.com/it/u=1612031903,227731354&fm=26&fmt=auto" alt="" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 常见问题结束 -->
  </div>
</template>

<script>
import { get } from "../utils/request";
import { fmtDate } from "../filters/index";
export default {
  data() {
    return {
      carousel: [],
      projects: [],
      article: [],
    };
  },
  methods: {
    fmtDate,
    // 学生风采跳转
    toArtDetails(id) {
      this.$router.push({
        path: "/article",
        query: { id: id },
      });
    },
    // 项目详情跳转
    toProject(id) {
      this.$router.push({
        path: "/project",
        query: { id: id },
      });
    },
    // 查询轮播图
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        if (res.status == 200) {
          this.carousel = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },

    // 查询研学精选
    findAllProject() {
      get("/index/project/pageQuery", { page: 1, pageSize: 3 }).then((res) => {
        if (res.status == 200) {
          this.projects = res.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },

    // 查询学生风采
    findAllArticle() {
      get("/index/article/pageQuery", { page: 1, pageSize: 10 }).then((res) => {
        if (res.status == 200) {
          //  用数组方法filter过滤掉审核未通过的学生风采
          this.article = res.data.list.filter(function (arr) {
            return arr.status == "审核通过";
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
  },
  created() {
    this.findAllCarousel();
    this.findAllProject();
    this.findAllArticle();
  },
};
</script>

<style lang="scss">
.projects {
  .wrapper {
    width: 1240px;
    // height: 1500px;
    // background-color: rgb(162, 156, 199);

    .title {
      font-size: 20px;
      line-height: 4em;
      border-bottom: 1px solid #ccc;
      img {
        transform: translate(10px, 10px);
      }
    }

    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      .left {
        width: 300px;
        height: 200px;
        background-color: #ccc;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        // background-color: rgb(207, 205, 91);
        padding: 0 2em;
        .name {
          font-size: 16px;
          font-weight: bold;
        }
        .time {
          margin: 1em 0;
        }
        .content {
          line-height: 2em;
        }
      }
    }
    .project:hover {
      background-color: rgb(236, 234, 234);
    }
  }
}

.article {
  padding-bottom: 2em;
  .wrapper {
    width: 1240px;

    .title {
      font-size: 20px;
      line-height: 4em;
      img {
        transform: translate(10px, 10px);
      }
    }
    .arts {
      display: flex;
      justify-content: space-between;

      .studentArt {
        flex-basis: 24%;
        cursor: pointer;
        border: 2px solid #729cad;
        border-radius: 5px;

        .pic {
          width: 100%;
          height: 160px;
          border-radius: 5px;
          overflow: hidden;
        }
        .text {
          padding: 1em;
          line-height: 2em;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .studentArt:hover {
        background-color: rgb(236, 234, 234);
      }
    }
  }
}
.problem {
  padding: 2em 1em;

  .wrapper {
    .title {
      font-weight: 700;
      font-size: 20px;
      line-height: 2em;
      color: #333;
      img {
        transform: translate(10px, 10px);
      }
    }
    .content {
      .left{
        background: #DCDFE6;
        margin-right: 10px;
        padding: 1em;
      }
      .right{
        background: #d3dce6;
        margin-left: 10px;
        padding: 1em;
      }
      span{
            font-weight: 700;
          font-size: 16px;
         line-height: 2em;
          color: #333;
        }
      
      p{
            text-indent: 2em;
            line-height: 1.8em;
        }
      img {
        width: 500px;
        display: block;
      }
    }
  }
}
</style>